<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div01
			{
				width: 300px;
				height: 300px;
				background-color: lightsalmon;
			}
			
		</style>
	</head>
	<body>
		<div id="div01">
			
		</div>
		<script type="text/javascript">
			div01.onclick=function(){div01.textContent="鼠标单击";}
			div01.ondblclick=function(){div01.textContent="鼠标双击";}
			div01.onmousedown=function(){div01.textContent="鼠标按下了";}
			div01.onmouseup=function(){div01.textContent="鼠标抬起";}
			div01.onmouseover=function(){div01.textContent="鼠标移入";}
			div01.onmouseout=function(){div01.textContent="鼠标移出";}
			div01.onmouse=function(){div01.textContent="鼠标移动"+event.clientX+","+event.clientY;}
		
		//练习
		
		</script>
		<div id="div02">
			<img src="u=3595720,3227287834&fm=253&fmt=auto&app=120&f=JPEG.webp" >
		</div>
		<script type="text/javascript">
		div02.onmouseover=function(){div02.style.opacity=0.5;}
		div02.onmouseout=function(){div02.style.opacity=1;}
		div02.onmouse=function(){div02.textContent="鼠标移动"+event.clientX+","+event.clientY;}	
// *练习：图片跟随鼠标移动
			// 事件添加到body上
			// 图片设置为绝对布局 position: absolute;
			// 当鼠标移动时  
			// img02.left = event.clientX; 
			// image02.top=event.clientY
		</script>
	</body>
</html>
